<template>
    <div id="app">
        <transition name="fade" mode="out-in">
          <div class="cover" @click="relink" v-if="!isOnline">
            <div class="weui-toast" v-if="loading">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">加载中...</p>
          </div>
          </div>
        </transition>
        <toptip></toptip>

<welcome v-if="$store.state.showWelcomePage"></welcome>
 <template v-else>       
        <div class="outter" :class="{'hideLeft':$route.path.split('/').length>2}">
            <section class="app-content">
                <keep-alive>
                    <router-view name="default"></router-view>
                </keep-alive>
            </section>
            <!--底部导航 路由 -->
            <transition name="fade">
                <footer class="app-footer" v-show="$route.path.indexOf('login')===-1 &&$store.getters.footer">
                    <wx-nav></wx-nav>
                </footer>
            </transition>
        </div>
        <!--其他内页集合 有过渡效果-->
       <transition name="custom-classes-transition" :enter-active-class="enterAnimate" :leave-active-class="leaveAnimate">
            <router-view name="subPage" class="sub-page"></router-view>
        </transition>
</template>

    </div>
</template>

<script>
import welcome from "./components/common/welcome.vue"
import WxNav from "./components/common/wx-nav"
import toptip from "./components/common/toptip"
import mixin from "./vuex/mixin.js" // 混合被单独放在 mixin.js 中管理
window.mixin = mixin // 将 混合/mixin 暴露在窗口对象中，某些组件需要时，直接提取 window.mixin
export default {
  name: "app",
  components: {
    WxNav,
    welcome,
    toptip
  },
  data() {
    return {
      pageName: "",
      isOnline: true,
      loading: false,
      routerAnimate: false,
      enterAnimate: "", //页面进入动效
      leaveAnimate: "" //页面离开动效
    }
  },
  methods: {
    reload: function() {
      window.location.reload(false)
    },
    relink: function() {
      let self = this
      this.loading = true
      this.reload()

      setTimeout(function() {
        self.loading = false
      }, 3000)
    },
    updateStatus: function() {
      if (typeof window.navigator.onLine === "undefined") {
        this.isOnline = true
      } else {
        this.isOnline = window.navigator.onLine
      }
    }
  },
  mounted() {
    let self = this
    this.updateStatus()
    window.addEventListener("online", this.updateStatus)
    window.addEventListener("offline", this.updateStatus)

    setTimeout(function() {
      self.$store.commit("showWelcomePage", false)
    }, 1000)

    document.addEventListener(
      "resume",
      () => {
        setTimeout(function() {
          if (self.$store.state.isActive) {
            // self.$store.commit("showWelcomePage", false)
            self.$store.commit("isActive", false)
            if (window.plus) {
              var ws = plus.webview.currentWebview()
              ws.reload(true)
            }
          }
        }, 0)
      },
      false
    )

    document.addEventListener(
      "pause",
      () => {
        setTimeout(function() {
          if (!self.$store.state.isActive) {
            self.$store.commit("showWelcomePage", true)
            self.$store.commit("isActive", true)
          }
        }, 0)
      },
      false
    )
  },
  watch: {
    isOnline: function(newer, older) {
      if (newer && newer != older) {
        this.reload()
      }
    },

    // 监听 $route 为内页设置不同的过渡效果
    $route(to, from) {
      const toDepth = to.path.split("/").length
      const fromDepth = from.path.split("/").length
      if (toDepth === 2) {
        this.$store.commit("setPageName", to.name)
      }
      //同一级页面无需设置过渡效果
      if (toDepth === fromDepth) {
        return
      }

      this.enterAnimate =
        toDepth > fromDepth ? "animated fadeInRight" : "animated fadeInLeft"
      this.leaveAnimate =
        toDepth > fromDepth ? "animated fadeOutLeft" : "animated fadeOutRight"
      // 从内页页进入内页 需要对内页重新设置离开动效 因为他们处于不同 name 的 router-view
      if (toDepth === 3) {
        this.leaveAnimate = "animated fadeOutRight"
      }
    }
  },
  ///读取数据
  beforeCreate() {
    this.$store.commit("showWelcomePage", true)
    // if (this.isOnline) {
    //   this.$store.dispatch("followsData", { uid: this.$store.getters.user.id })
    // }
  }
}
</script>
<style>
/*将公用的样式统一在此导入*/

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@import "assets/css/base.css";
@import "assets/css/common.css";
@import "assets/css/wx-header.css";
/*阿里 fonticon*/

@import "assets/css/lib/iconfont.css";
/*过渡效果需要的动画库*/

@import "assets/css/lib/animate.css";
/*weui 样式库 非常适合高仿微信*/

@import "assets/css/lib/weui.min.css";
</style>
